<!DOCTYPE HTML>  
<html>  
<head>  
    <meta charset="utf-8"/>  
</head>  
<body>
	<style>
	     .draw-btn{
	        width:30px;height: 27px
	     }  
		#draw-canvas{cursor:crosshair;}  
		#btn-red{background:red;}  
		#btn-blue{background:blue;}  
		#btn-yellow{background:yellow;}  
		#btn-black{background:black;}  
		#btn-zi{background:#8B026B;}  
	</style>  
<div style="width:100%;height:100%">  
	<div style="position: absolute;top: 40px;">
	    <label style="vertical-align: super;margin-left: 6px;">画笔颜色：</label>
        <input type="button" class="draw-btn" id="btn-black" data-color="black">   
	    <input type="button" class="draw-btn" id="btn-red" data-color="red">  
	    <input type="button" class="draw-btn" id="btn-blue" data-color="blue">  
	    <input type="button" class="draw-btn" id="btn-yellow" data-color="yellow">  
	    <input type="button" class="draw-btn" id="btn-zi" data-color="#8B026B">   
	    <label style="vertical-align: super;margin-left: 6px;">画笔宽度：</label>  
	    <select id="draw-sel" style="vertical-align: super;">   
	        <option value="4">4</option>  
	        <option value="8">8</option>  
	        <option value="16">16</option>  
	        <option value="30">30</option>  
	    </select> 
	</div>
	<canvas id="draw-canvas"> </canvas>  
</div>
<!-- <input type="button" value="生成图片" onclick="change()"><br>   -->
<!-- <img id="image" src="" width="500px" height="200px">  --> 
  
<!-- <script type="text/javascript">  
function change(){  
    document.getElementById("image").src=canvas.toDataURL("image/jpg");  
    //window.open("demo.htm", "height=100px, width=400px");  
    //alert(document.getElementById("image"));  
    }  
//下拉画笔宽度  
 window.onload=function(){ 
	 debugger
    var huabi=document.getElementById("draw-sel");  
    huabi.onchange=function(){  
    linw=huabi.value;  
    };  
    //linw=huabi;  
};  
var canvas=document.getElementById("draw-canvas");  
var ctx=canvas.getContext("2d");  
//画一个黑色矩形  
ctx.fillStyle="rgba(225,225,225,0)";  
ctx.fillRect(0,0,600,400);  
//按下标记  
var onoff=false;  
var oldx=-10;  
var oldy=-10;  
//设置颜色默认为黑色
var linecolor="black";  
//宽度默认为4  
var linw=4;  
//鼠标移动事件，事件绑定  
canvas.addEventListener("mousemove",draw,true);  
canvas.addEventListener("mousedown",down,false);  
canvas.addEventListener("mouseup",up,false);  
function down(event){ 
    onoff=true;  
    oldx=event.pageX-10;  
    oldy=event.pageY-10;  
    }  
    function up(){  
    onoff=false;  
    }  
    function draw(event){  
    if(onoff==true)  
        {  
        var newx=event.pageX-10;  
        var newy=event.pageY-10;  
        ctx.beginPath();  
        ctx.moveTo(oldx,oldy);  
        ctx.lineTo(newx,newy);  
        ctx.strokeStyle=linecolor;  
        ctx.lineWidth=linw;  
        ctx.lineCap="round";  
        ctx.stroke();  
          
        oldx=newx;  
        oldy=newy;  
        }  
    }  
</script>  -->
</body>  
</html>  